<template>
  <div
    class="col-status back-col"
    :class="{
      'status-none': val.applyStatus==1,
      'status-normal': val.applyStatus==3,
      'status-equal': val.applyStatus==5,
      'status-through': val.applyStatus==6
    }"
  >
    <span v-if="val.applyStatus==2">-</span>
    <span v-else-if="val.applyStatus==1"></span>
    <span v-else>{{ $t('money.unit') }}{{ val.price }}</span>
    <a-icon
      v-if="val.applyDetailList && val.applyDetailList.length>0"
      class="col-status-more"
      type="more"
    />
  </div>
</template>
<script>
export default {
  props: ['val']
}
</script>
<style lang="less" scoped>
.col-status {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4D5C6F;
  border-top:1px solid #E5EBF3;
  position: relative;
  .col-status-icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
  }
  .col-status-more {
    font-size: 24px;
    color: #ABB8CE;
    position: absolute;
    right:0;
  }
}
.status-none{
  background: #F7F9FB !important;
}
.status-equal {
  color: #F02F2F;
}
.status-normal {
  color: #ABB8CE;
}
.status-through {
  text-decoration: line-through;
  background: #FFF7F7 !important;
  color: #ABB8CE;
}
</style>
